import React,{useEffect} from 'react';
import {connect} from 'react-redux';
import {topicAction} from '../../../store/actions';
import {useHistory} from 'react-router';

import style from './index.module.scss';

interface Iprops{
    getTopic:()=>void,
    topicList:Array<object>
}
const Topic:React.FC<Iprops> = props=>{
    const history = useHistory();
    useEffect(()=>{
        props.getTopic()
    // eslint-disable-next-line react-hooks/exhaustive-deps
    },[])
    return <div className={style.topic}>
         {
            props.topicList&&props.topicList.map((item:any)=>{
                return <dl 
                className={style.item} 
                key={item.id}
                onClick={()=>history.replace(`/topicDetail/${item.id}`)}
                >
                <dt><img src={item.scene_pic_url} alt=""/></dt>
                <dd>{item.title}</dd>
                <dd>{item.subtitle}</dd>
                <dd><b>￥ {item.price_info}元起</b></dd>
            </dl>
            })
        }
    </div>
}
const mapStateToProps=(state:any)=>{
    return state.topic
}
const mapDispatchToProps=(dispatch:Function)=>{
    return {
        getTopic:()=>{
            dispatch(topicAction())
        }
    }
}
export default connect(mapStateToProps,mapDispatchToProps)(Topic)   
